<template>
  <div style="height: 100%; overflow: hidden">
    <FancyList :request="onRequest">
      <template #default="{ filmId, name, poster }">
        <div>我的天 - {{ filmId }} - {{ name }} - {{ poster }}</div>
      </template>
    </FancyList>
  </div>
</template>

<script lang="ts" setup>
import FancyList, { type IParams } from '@/components/fancy-list/index.vue'
import { getFilmList } from '@/api/modules/film'

async function onRequest(params: IParams): Promise<{ list: any[]; total: number }> {
  const { films, total } = await getFilmList({
    type: 1,
    cityId: 440300,
    pageNum: params.pageNum,
    pageSize: params.pageSize
  })

  // 返回一个包含有 list 与 total 的对象
  return {
    list: films,
    total
  }
}
</script>
